import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { useState } from 'react'
import { hideLoading, showLoading, showModal, showToast } from '../../../utils'
import { AtForm, AtInput, AtButton } from 'taro-ui'
import './index.scss'
import { loginApi } from '../../../services/Login'

const app = Taro.getApp({
    allowDefault : true
})

export default () => {
    let [formData, setformData] = useState({account : '', password : ''})
    function inputFormData(field, value) {
        formData[field] = value
        setformData({...formData})
    }

    async function login() {
        showLoading('登录中...')
        let res = await loginApi(formData)
        hideLoading()
        if(res.success) {
            showToast('登录成功')
            app.$app.loginComplete(res.data)
            Taro.redirectTo({
                url : '/merchantClient/pages/home/index'
            })
        }else {
            showModal(res.msg)
        }
        
    }

    async function loginByMobile(params) {
        
    }

    return <>
        <View className='p-l-r'>
            <AtForm>
                <AtInput name='account' type='text' maxlength={11} title='账号' placeholder='手机号码' value={formData.account} onChange={value => inputFormData('account', value)} />
                <AtInput name='password' type='password' maxlength={20} title='密码' placeholder='请输入登录密码' value={formData.password} onChange={value => inputFormData('password', value)} />
                <View className='m-t-60'>
                    <AtButton type='primary' circle disabled={formData.account === '' || formData.password === ''} onClick={login}>提 交</AtButton>
                </View>
            </AtForm>

            <View className='m-t-30 text-center'>
                <Button className='login-mobile-btn' size='mini' onGetPhoneNumber={loginByMobile}>手机号一键登录</Button>
            </View>

        </View>
    </>
}